<template>
  <div>
    <a-modal
      ok-text="确认"
      cancel-text="取消"
      :maskClosable="false"
      :title="'添加图片'"
      :width="modalWidth"
      @cancel="handleClose"
      @ok="handleOk"
      :destroyOnClose="true"
      :visible="visible"
      footer=""
    >
      <template>
        <div class="modalBut">
          <a-button @click="handleClose">
            取消
          </a-button>
          <a-button @click="handleOk" type="primary">确认</a-button>
        </div>
      </template>
      <div class="img-box">
        <ImageUpload v-model.trim="picture"></ImageUpload>
      </div>
    </a-modal>
  </div>
</template>
<script>
import ImageUpload from "@/components/upload/ImageUpload.vue";
export default {
  components: { ImageUpload },
  data() {
    return {
      visible: false,
      modalWidth: 652,
      picture: ""
    };
  },
  methods: {
    handleClose() {
      this.visible = false;
      console.log(imgData);
      this.$emit("ok", this.picture);
      this.picture = "";
    },
    handleOk() {
      this.visible = false;
      this.$emit("ok", this.picture);
      this.picture = "";
    },
    modalShow() {
      this.visible = true;
    }
  }
};
</script>
<style scoped lang="less">
.img-box {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
